<!DOCTYPE html>
<!--
/*
 * Copyright 2013 The Polymer Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */
-->
<html>
<head>
  <title>feed viewer</title>
  <script src="https://www.google.com/jsapi"></script>
  <script src="../../../polymer/polymer.js"></script>
  <link rel="import" href="../components/pi-feed-viewer.html"/>
  <style>
    html, body {
      height: 100%;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif;
      margin: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
    
    pi-feed-viewer {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <pi-feed-viewer layout="quilt" topicsLayout="grid"></pi-feed-viewer>
  
  <script>
    document.addEventListener('WebComponentsReady', function() {
      var viewer = document.querySelector('pi-feed-viewer');
      viewer.topics = [
        {title: 'Technology', feed: [
          {title: 'The Verge', feed: 'http://www.theverge.com/rss/index.xml'},
          {title: 'Engadget', feed: 'http://feeds.engadget.com/weblogsinc/engadget'}]},
        {title: 'Sports', feed: [
          {title: 'Deadspin', feed: 'http://feeds.gawker.com/deadspin/full'}]}
      ];
    });
  </script>
</body>
</html>
